<template>
  <div class="page-account-index">
    <el-row>
      <el-col v-for="item in pluginData" :key="item.id()" :xs="8" :sm="6" :md="6" :lg="4" :xl="3">
        <div class="plugin animate__animated animate__bounceIn">
          <img :src="item.img()" @click="onOpenPlugin(item)">
          <div class="name">{{ item.name() }}</div>
          <div class="iconfont icon-pin-fill pin flash" :class="{ on: onIsPlugin(item) }" @click="onMakePlugin(item)"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import pluginModel from '@/model/plugin'
import accountModel from '@/model/account'

export default {
  setup() {
    // 插件
    const pluginData = ref([])
    
    // 加载插件
    const onLoadPlugin = () => {
      pluginData.value = app.plugin.filter(pluginModel.getList(), accountModel.getData().plugin)
      // 加载常用插件
      app.plugin.loadLocal(pluginData.value)
    }
    

    // 进入插件
    const onOpenPlugin = plugin => {
      // 延迟进入
      app.ui.loadingBlack()
      setTimeout(() => {
        // 进入插件
        app.plugin.open(plugin)
        app.ui.loadingClose()
      }, 500)
    }

    // 加入常用插件
    const onMakePlugin = plugin => {
      app.plugin.makeLocal(plugin)
      // 重新加载插件
      onLoadPlugin()
    }

    // 常用插件是否存在
    const onIsPlugin = plugin => {
      return app.plugin.isLocal(plugin) > -1
    }

    // 如果没有插件数据，就加载一次
    if(pluginModel.getList().length == 0) {
      pluginModel.get().then(() => {
        onLoadPlugin()
      })
    }

    onLoadPlugin()

    return {
      pluginData,
      onOpenPlugin,
      onIsPlugin,
      onMakePlugin
    }
  }
}
</script>